<template>
  <div class="p-2">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="130px">
      <el-form-item label="顶部图片" prop="topImg">
        <el-space direction="vertical" alignment="start" :size="4">
          <JqtOssLibrary v-model="formData.topImg" :limit="1" :isObject="false" />
          <el-text type="info" size="small">建议尺寸：750*高不限</el-text>
        </el-space>
      </el-form-item>

      <el-form-item label="客服名称" prop="customer.switchValue">
        <el-switch v-model="formData.customer.switchValue" active-value="1"  inactive-value="0" />
      </el-form-item>
      <div v-if="formData.customer.switchValue === '1'">
        <el-form-item label="客服名称" prop="customer.name">
          <el-input v-model="formData.customer.name" placeholder="请输入客服名称" />
        </el-form-item>
      </div>

      <el-form-item label="客服头像" prop="customerPicture">
        <JqtOssLibrary v-model="formData.customerPicture" :data="formData.customerPicture" :limit="1" :isObject="false" />
      </el-form-item>
      <el-form-item label="游客头像" prop="touristPicture">
        <JqtOssLibrary v-model="formData.touristPicture" :data="formData.touristPicture" :limit="1" :isObject="false" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">

import JqtOssLibrary from '@/components/JqtOssLibrary/index.vue';
import JqtInputTag from '@/components/JqtInputTag/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable,bus_spread_link_page_mode } = toRefs<any>(proxy?.useDict('sys_normal_disable','bus_spread_link_page_mode'));

const formRef = ref<ElFormInstance>();
export interface KeywordModeVo {
  //顶部图片
  topImg?: string;
  //客服名称
  customer?: {
    //客服名称开关 0.关闭 1.开启
    switchValue:string;
    //名称
    name: string;
  };
  //客服头像
  customerPicture?: string;
  //游客头像
  touristPicture?: string;

}
const formData = reactive<KeywordModeVo>({
  topImg: undefined,
  customer: {
    switchValue: '0',
    name:undefined,
  },
  customerPicture: undefined,
  touristPicture: undefined,
});

const rules = {
  customerPicture: [{ required: true, message: '请上传客服头像', trigger: 'change' }],
};

const props = defineProps({
  modelValue: Object,
});

onMounted(() => {
// 在初始化时设置 formData
  Object.assign(formData, props.modelValue);
});

const emit = defineEmits(['update:modelValue','confirmCallBack']);
watch(formData, (newVal, oldVal) => {
  emit('update:modelValue', newVal);
  emit('confirmCallBack', newVal);
}, { deep: true, immediate: true });

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    Object.assign(formData, newVal);
  }
}, { deep: true, immediate: true });


const validateForm = () => {
  return new Promise((resolve, reject) => {
    if (!formRef.value) {
      reject(new Error('表单引用不存在'));
      return;
    }
    formRef.value.validate(valid => {
      if (valid) {
        resolve(true);
      } else {
        reject(new Error('关键字表单填写不完整'));
      }
    });
  });
};

defineExpose({
  validateForm,
});
</script>

<style scoped>
.noteBj {
  background: #F7F7F7;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
